<template>
  <div class="menu">
    <label><input type="checkbox" checked /> 全选</label>
    <label><input type="checkbox" /> 1号线</label>
    <label><input type="checkbox" /> 2号线</label>
    <label><input type="checkbox" /> 3号线</label>
  </div>
</template>


<script setup>
import { onMounted, ref } from 'vue'
import { useLineData } from '@/store'

const subLineData = ref([])
const showAll = ref(true)
const lineDataStore = useLineData()

// 全选，控制所有站点，站线
const controlAll = (e) => {
    const checked = e.target.checked
    const lineNames = subLineData.value.map(item => item.name)
    lineDataStore.displayLine(lineNames, checked)
}

// 单独控制站线
const chooseLine = (item) => {
    const names = [item.name]
    lineDataStore.displayLine(names, !item.checked)
}

onMounted(async () => {
    subLineData.value = lineDataStore.allData
})
</script>


<style scoped>
.menu {
  position: absolute;
  right: 40%;
  bottom: 20%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}
</style>
